<template>
  <view class="mine">
    <navigator url="/pages/subpackages/mine/userinfo/userinfo" open-type="navigate" hover-class="none" class="mine-info u-m-b-30 u-p-30">
      <view class="top u-flex">
        <u-image :src="userInfo.avatar" mode="aspectFill" width="120" height="120" shape="circle"></u-image>
        <view class="info u-m-l-20 u-flex-1">
          <view class="title u-flex">
            <text class="name u-m-r-10 u-font-30">{{userInfo.nickname || ""}}</text>
            <u-icon v-if="userInfo.gender == 1" name="man" color="#389bf2" size="30"></u-icon>
            <u-icon v-else-if="userInfo.gender == 2" name="woman" color="#ff3e96" size="30"></u-icon>
            <u-icon v-if="userInfo.is_vip == 1" class="u-m-l-30" name="level" color="#f11c14" size="40"></u-icon>
          </view>
          <view class="u-m-t-20 u-font-26">
            <text class="address u-m-r-40">{{userInfo.city || ""}}</text>
            <text v-if="userInfo.is_fws" class="position">#{{userInfo.is_fws || ""}}</text>
          </view>
        </view>
        <u-icon name="arrow-right" color="#999" size="40"></u-icon>
      </view>
    </navigator>
    <navigator v-if="userInfo.is_lvs" url="/pages/subpackages/mine/join/join" open-type="navigate" hover-class="none" class="mine-rush u-flex u-row-between">
      <u-icon name="level" color="#fff" size="32"></u-icon>
      <view class="text u-flex-1 u-m-l-20 u-font-26">招募合伙人！</view>
      <u-tag text="立即查看" shape="circle" bg-color="#fff" color="#389bf2" border-color="#fff" />
    </navigator>
    <navigator v-else url="/pages/subpackages/mine/member/index" open-type="navigate" hover-class="none" class="mine-rush u-flex u-row-between">
      <u-icon name="level" color="#fff" size="32"></u-icon>
      <view class="text u-font-26">VIP限时促销，全场八折大促，限时抢购！</view>
      <u-tag text="立即抢购" shape="circle" bg-color="#fff" color="#389bf2" border-color="#fff" />
    </navigator>
    <view class="mine-tab u-m-30 u-p-20 u-font-26 u-flex u-flex-wrap">
      <template v-for="(item, index) in tabList">
        <navigator v-if="item.type ? userInfo.is_lvs == item.status : true" :key="index" :url="item.url" open-type="navigate" hover-class="none" class="item u-flex-1 u-flex-col u-col-center">
          <u-image :src="item.image" mode="aspectFill" width="60" height="60"></u-image>
          <view class="name u-m-t-12">{{item.name}}</view>
        </navigator>
      </template>
    </view>
    <template v-for="(item, index) in navList">
      <view v-if="item.type ? userInfo.is_lvs == item.status : true" :key="index" class="mine-nav u-m-30">
        <view class="title">{{item.title}}</view>
        <view class="list u-font-26 u-flex u-flex-wrap">
          <template v-for="(its, ind) in item.list">
            <navigator v-if="its.type ? userInfo.is_lvs == its.status : true" :key="ind" :url="its.url" open-type="navigate" hover-class="none" class="item u-rela u-flex-col u-col-center">
              <u-image :src="its.image" mode="aspectFill" width="50" height="50"></u-image>
              <view class="name u-m-t-12">{{its.name}}</view>
            </navigator>
          </template>
          <u-button v-if="index" class="item" open-type="contact" hover-class="none" :custom-style="confirmBtnStyle">
            <u-image src="/static/img/mine-nav-item-11.png" mode="aspectFill" width="50" height="50"></u-image>
            <view class="name u-m-t-12 u-font-26">在线客服</view>
          </u-button>
          <u-button v-if="index" class="item" open-type="share" hover-class="none" :custom-style="confirmBtnStyle">
            <u-image src="/static/img/mine-nav-item-13.png" mode="aspectFill" width="50" height="50"></u-image>
            <view class="name u-m-t-12 u-font-26">邀请有礼</view>
          </u-button>
        </view>
      </view>
    </template>
    <view class="mine-link u-p-t-30 u-p-b-30 u-font-26 u-text-center">
      <view class="item">版权所有：湖北律之家网络科技有限公司</view>
      <view @click="callMobile" class="item u-m-t-10">技术支持：微派科技</view>
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      userInfo: {},
      tabList: [
        {
          type: 1,
          status: 0,
          url: "/pages/subpackages/mine/resume/index",
          image: "/static/img/mine-tab-item-01.png",
          name: "我的履历",
        },
        // {
        //   url: "/pages/subpackages/mine/order/order?user=1",
        //   image: "/static/img/mine-tab-item-02.png",
        //   name: "我的订单",
        // },
        {
          type: 1,
          status: 1,
          url: "/pages/subpackages/mine/topic/topic",
          image: "/static/img/mine-tab-item-05.png",
          name: "我的话题",
        },
        {
          url: "/pages/subpackages/mine/interaction/interaction",
          image: "/static/img/mine-tab-item-05.png",
          name: "我的互动",
        },
        {
          type: 1,
          status: 1,
          url: "/pages/subpackages/mine/like/like",
          image: "/static/img/mine-tab-item-06.png",
          name: "关注好友",
        },
        {
          type: 1,
          status: 0,
          url: "/pages/subpackages/mine/inquire/inquire",
          image: "/static/img/mine-tab-item-03.png",
          name: "我的打听",
        },
        {
          type: 1,
          status: 0,
          url: "/pages/subpackages/mine/topic/topic",
          image: "/static/img/mine-tab-item-05.png",
          name: "我的话题",
        },
        {
          type: 1,
          status: 0,
          url: "/pages/subpackages/mine/like/like",
          image: "/static/img/mine-tab-item-06.png",
          name: "关注好友",
        },
        {
          type: 1,
          status: 0,
          url: "/pages/subpackages/mine/customer/customer",
          image: "/static/img/mine-tab-item-04.png",
          name: "我的律师",
        },
      ],
      offset: [-10, 40],
      navList: [
        {
          title: "常用工具",
          list: [
            {
              url: "/pages/subpackages/mine/authen/index",
              image: "/static/img/mine-nav-item-01.png",
              name: "认证",
            },
            {
              url: "/pages/subpackages/mine/recruit/recruit",
              image: "/static/img/mine-nav-item-02.png",
              name: "招聘",
            },
            {
              url: "/pages/subpackages/mine/wallet/index",
              image: "/static/img/mine-nav-item-04.png",
              name: "财务",
            },
          ],
        },
        {
          title: "其他",
          list: [
            {
              // type: 1,
              // status: 0,
              url: "/pages/subpackages/mine/demand/index",
              image: "/static/img/mine-nav-item-12.png",
              name: "我的需求",
            },
            // {
            //   type: 1,
            //   status: 0,
            //   url: "/pages/subpackages/mine/customer/customer",
            //   image: "/static/img/mine-nav-item-08.png",
            //   name: "我的律师",
            // },
          ],
        },
      ],
      confirmBtnStyle: {
        // margin: "0",
        padding: "0",
        flex: "0 0 calc(100% / 3)",
        width: "100% / 3",
        height: "auto",
        lineHeight: "normal",
        fontSize: "26rpx",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
      },
    };
  },
  computed: {
    ...mapState(["vuex_user_id", "vuex_identity"]),
  },
  onShow() {
    if (!this.vuex_user_id)
      return uni.navigateTo({ url: "/pages/subpackages/mine/login/login" });
    this.getUserInfo();
  },
  methods: {
    // 获取用户信息
    getUserInfo() {
      this.$api
        .getUserInfo({
          user_id: this.vuex_user_id,
        })
        .then((res) => {
          // console.log(res);
          this.userInfo = res;
          this.$u.vuex("vuex_identity", res.is_lvs == 1 ? 1 : 0);
          this.$u.vuex("vuex_power_01", res.rez_j.one);
          this.$u.vuex("vuex_power_02", res.rez_j.two);
          this.$u.vuex("vuex_power_03", res.rez_j.three);
          this.$u.vuex("vuex_power_04", res.rez_j.four);
          // this.getSecretKey(res);
        });
    },
    // 拨打电话
    callMobile() {
      uni.makePhoneCall({
        phoneNumber: "18396839126",
      });
    },
    // 获取秘钥
    getSecretKey(userinfo) {
      this.$api
        .getSecretKey({
          user_id: this.vuex_user_id,
        })
        .then((res) => {
          let userInfo = {
            userId: this.vuex_user_id.toString(),
            userSig: res.toString(),
            avatarUrl: userinfo.avatar.toString(),
            nickName: userinfo.nickname.toString(),
          };
          let promise = this.tim.login({
            userID: userInfo.userId,
            userSig: userInfo.userSig,
          });
          promise
            .then((res) => {
              // console.log(res);
              this.$u.vuex("vuex_user_info", userInfo);
              this.$store.commit("toggleIsLogin", true);
              setTimeout(() => {
                this.updateTim(userInfo);
              }, 200);
            })
            .catch((error) => {
              console.log(error);
            });
        });
    },
    // 更新TIM信息
    updateTim(userinfo) {
      let promise = this.tim.updateMyProfile({
        nick: userinfo.nickName,
        avatar:
          userinfo.avatarUrl ||
          "https://lvs.shandongweipai.com/uploads/20211026/d51d9b72b8884a240de555441dc6e708.jpg",
        gender: this.$TIM.TYPES.GENDER_MALE,
        selfSignature: "我的个性签名",
        allowType: this.$TIM.TYPES.ALLOW_TYPE_ALLOW_ANY,
      });
      promise
        .then((res) => {
          // console.log(res);
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
  onShareAppMessage(res) {
    if (res.from === "button") {
      return {
        path: `/pages/home/home?shareid=${this.vuex_user_id}`,
      };
    }
  },
};
</script>

<style lang="scss" scoped>
.mine {
  &-info {
    border-radius: 0 0 30rpx 30rpx;
    box-shadow: 0 0 10px $uni-border-color;

    .name {
      font-weight: bold;
    }

    .address {
      color: $uni-text-color-grey;
    }

    .position {
      color: $uni-text-color-main;
    }

    .tag {
      margin: 10rpx 0 0 60rpx;
    }
  }

  &-rush {
    padding: 10rpx 20rpx;
    background-color: $uni-bg-color-main;
    color: $uni-text-color-inverse;
  }

  &-tab {
    border-radius: 10rpx;
    box-shadow: 0 0 5px $uni-border-color;

    .item {
      flex: 0 0 calc(100% / 3);

      &:nth-child(n + 4) {
        margin: 30rpx 0 0;
      }
    }

    .name {
      .con {
        color: $uni-text-color-main-red;
      }
    }
  }

  &-nav {
    border-radius: 10rpx;
    box-shadow: 0 0 5px $uni-border-color;

    .title {
      padding: 0 20rpx;
      line-height: 75rpx;
      border-bottom: 1px solid $uni-bg-color-hover;
    }

    .list {
      padding: 30rpx 0;

      .item {
        flex: 0 0 calc(100% / 3);

        &:nth-child(n + 4) {
          margin: 30rpx 0 0;
        }
      }

      .number {
        left: calc(4em + 16rpx);
        top: -16rpx;
        padding: 4rpx 8rpx;
        line-height: 24rpx;
        background-color: $uni-bg-color-main-red;
        border-radius: 50px;
        font-size: 24rpx;
        color: $uni-text-color-inverse;
        text-align: center;
      }
    }
  }

  &-link {
    color: $uni-text-color-grey;
  }
}
</style>
